$(function () {
    // 弹窗对象
    var layer = layui.layer;

    /* 1-切换登录和注册表单 */
    // 单击“去注册”按钮
    $('#link_reg').on('click',function () {
        // 注册表单显示
        $('.reg-box').show();
        // 登陆表单隐藏
        $('.login-box').hide();
    })
    // 单击“去登录”按钮
    $('#link_login').on('click',function () {
        // 注册表单隐藏
        $('.reg-box').hide();
        // 登陆表单显示
        $('.login-box').show();
    })

    /* 2-自定义表单验证规则 */
    // 表单对象
    var form = layui.form
    // 定义规则
    form.verify({
        // pwd 规则名称
        pwd: [
            /^[\S]{6,12}$/,
            '密码格式错误，请输入6-12位非空字符'
        ],
        repwd: function (value) {
            // console.log(value);
            // 判断密码和确认密码是否一致
            // []属性选择器：属性name里面的password元素
            var repwd = $('#form_reg [name=password]').val();
            if (repwd !== value) {
                return '两次输入的密码不一致'
            }
        }
    })

    /* 3-注册功能 */
    // 注册表单提交事件
    $('#form_reg').on('submit', function (e) {
        e.preventDefault();
        // 收集表单数据
        /* 
        var data = {
            username: $('#form_reg [name=username]').val().trim(),
            password: $('#form_reg [name=password]').val().trim()
        }
        */
        // 一键收集
        var data = $(this).serialize();
        // console.log(data);
        // 发送ajax请求，调接口
        $.ajax({
            method: 'post',
            url: '/api/reguser',
            data: data,
            success: function (res) {
                // 判断是否成功
                if (res.status !== 0) {
                    // console.log(res)  message是res里面的
                    // return console.log(res.message);
                    return layer.msg(res.message);
                }
                // console.log('注册成功');
                layer.msg('注册成功，请登录', function () {
                    // 显示登录表单，隐藏注册表单（触发“去登陆”按钮的点击事件）
                    $('#link_login').click();
                })
            }
        })
    })

    /* 4-登录功能 */
    $('#form_login').on('submit', function (e) {
        e.preventDefault();
        var data = $(this).serialize();
        $.ajax({
            type:'post',
            url:'/api/login',
            data: data,
            success: function (res) {
                console.log(res);
                // 判断是否登录成功
                if (res.status !== 0) {
                    return layer.msg(res.message);
                }
                // 把token保存下来,为后续接口的调用做准备
                localStorage.setItem('token', res.token);
                layer.msg('登陆成功', function () {
                    // 跳转页面到后台
                    location.href = 'index.html';
                })
            }
        })
    })
})